<template>
	<w-container :loading="loading" class="plr-16 pt-16">
		<w-navbar id='my-nav' title="我要求购" bgColor="#F5F5F5"></w-navbar>
		<view class="pa-10 br-12 bg-color-item">
			<view class="flex flex-ai-center">
				<w-image radius="12" :src='info.listimg' width="83" height="83"></w-image>
				<view class="flex-dir-col flex flex-js-sb pl-16 flex-1">
					<view class="font-color-textPrimary font-w-600">{{info.name}}</view>
				</view>
			</view>
		</view>

		<view class="pa-10 br-12 bg-color-item mt-16">
			<view class="flex flex-ai-center">
				<text class="font-w-500 font-color-textPrimary">求购价格</text>
				<!-- 				<view class="tips font-color-white flex flex-ai-center font-size-12 ptb-3 plr-8 ml-4">
					当前最高求购价 ￥{{info.max_buy_price}}
					<u-icon class="ml-8" name='reload' @click='getInfo(true)' color="#fdfdfd"></u-icon>
				</view> -->
			</view>
			<!-- 	<view class="font-color-999 font-size-12 mt-8">
				{{handleLang('求购价格不得低于地板价的')}}{{info.floor_price.price_price_ratio}}%，{{handleLang('当前地板价为')}}{{info.floor_price.low_price}}元
			</view> -->
			<view class="flex inp flex-js-sb font-color-222 mt-16">
				<view class="flex flex-js-sb font-size-20 flex-ai-center font-color-222" style="width: 350rpx;">
					￥<input class="font-size-16" v-model="form.price" type="number" @input='priceInput'
						:placeholder="placeholderTips">
				</view>

				<view class="font-size-10  font-color-999">
					{{priceTips}}
				</view>
			</view>
			<view class="font-color-999 flex flex-ai-center  font-size-12 mt-16 ">
				<text>当前藏品最高求购:</text>
				<text class="font-color-black">￥{{info.max_beg_price}}</text>
				<u-icon class="ml-8" name='reload' @click='getInfo(true)' color="#222"></u-icon>
				<text style="margin-left: auto;color: #E71B1B;" class="font-size-16 font-w-500"
					@click="form.price = info.max_beg_price">使用价格</text>
			</view>
			<view class="flex flex-js-sb flex-ai-center number-box mt-16">
				<view class="font-color-black font-size-14">求购数量</view>
				<u-number-box v-model="form.number">
					<view slot="minus" class="minus">
						<w-icon name="minus-active" size="18"></w-icon>
					</view>
					<input type="number" :value="form.number" />
					<view slot="plus" class="plus">
						<w-icon name="add-active" size="18"></w-icon>
					</view>
				</u-number-box>
			</view>
		</view>

		<view class="pay-list pa-16 bg-color-item mt-16 br-12">
			<view class="ptb-12 flex flex-js-sb flex-ai-center" v-for="item in payList" :key="item.auth_key"
				@click="targetCheck(item)">
				<view class="flex">
					<w-icon :name="item.icon" size="24"></w-icon>
					<text class="pl-12 font-color-textPrimary">{{item.name && handleLang(item.name)}}</text>
				</view>
				<view class="" v-if="item.able">
					<w-icon v-show='item.check' name="check-icon" size="16"></w-icon>
					<w-icon v-show='!item.check' name="uncheck-circle-icon" size="16"></w-icon>
				</view>
				<view v-else class="font-color-white bg-color-black font-size-10 flex flex-center"
					style="width: 46px;height: 23px;border-radius: 32px" @click="toOpen">
					去开通
				</view>
			</view>
		</view>
		<view class="trade pa-16 bg-color-item mt-16 br-12">
			<view class="font-color-textPrimary font-w-500 font-size-14 mb-8">
				求购说明
			</view>
			<u-parse :content='appConfig.trade_rule'></u-parse>
		</view>




		<view class="action bg-color-bottombtn">
			<view class="flex flex-js-sb flex-ai-center ptb-7 plr-16">
				<view class="font-color-textPrimary">
					{{handleLang('合计')}}：￥{{totalPrice}}
				</view>
				<w-button :disabled="disable" style="width: 330rpx;"
					@click.native='createOrder'>{{handleLang('预付')}}</w-button>
			</view>
			<u-status-bar></u-status-bar>
		</view>

		<w-toast v-model="showPriceTips" :title="null" :content="handleLang('您的出价高于或者等于目前市场最低价，你可以直接购买该藏品。')"
			:cancelText="handleLang('取消')" :submitText="handleLang('去购买')" @action='tipAction'></w-toast>
	</w-container>
</template>

<script>
	import {
		getTradInfo,
		createTradOrder
	} from '@/api/trad/index.js'
	import {
		basePayList
	} from '@/config/index.js'
	import {
		mapActions
	} from 'vuex'
	import PayUtil from '@/utils/payUtil.js'
	export default {
		data() {
			return {
				showPriceTips: false,
				loading: true,
				id: null,
				info: {
					floor_price: {}
				},
				form: {
					number: 1,
					price: null
				},
				payList: []
			}
		},
		computed: {
			priceTips() {
				if (this.form.number > 1 && this.form.price) {
					return `(合计:￥${this.form.price}x${this.form.number}=￥${this.totalPrice})`
				}
				return;
			},
			placeholderTips() {
				if (Number(this.info.min_beg_price)) {
					let min = Number(this.info.min_beg_price).toFixed(2)
					return `不得低于${min}元`
				}
				return '请输入求购价格'
			},
			totalPrice() {
				if (this.form.price && this.form.number) {
					return (this.form.price * this.form.number).toFixed(2)
				}
				return '--'
			},
			disable() {
				let hasCheck = this.payList.findIndex(v => v.check) > -1
				let able = this.form.number && this.form.price && hasCheck
				return !able
			},
			priceTipsTitle() {
				return '建议求购价：￥96'
			}

		},
		onLoad({
			id
		}) {
			this.getUserInfo().then(res => {
				this.payList = basePayList.map(v => {
					v.able = !!this.userInfo[v.auth_key]
					v.check = false
					return v
				})
			})
			this.id = id;
			this.getInfo()

		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			priceInput({
				detail
			}) {
				let {
					value
				} = detail
				uni.$u.debounce(() => {
					if (value && value.includes('.')) {
						let numArr = value.split('.')
						let litNum = numArr[1]
						if (litNum.length > 2) {
							this.form.price = numArr[0] + '.' + String(litNum).substr(0, 2)
						}
					}
				}, 500)
			},
			tipAction(res) {
				if (res) {
					uni.navigateTo({
						url: `/pages/market/marketGoodsList?id=${this.id}&isagreement=1`
					})
				}
			},
			toOpen() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			targetCheck(item) {
				if (!item.able) return;
				this.payList = this.payList.map(v => {
					v.check = v.auth_key == item.auth_key && !item.check
					return v
				})
			},
			getInfo(isReload = false) {
				if (isReload) {
					uni.showLoading({
						title: '正在刷新'
					})
				}
				getTradInfo(this.id).then(res => {
					this.info = res.data;
					if (isReload) {
						uni.showToast({
							title: "刷新成功"
						})
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			changeInput(v) {
				console.log(v)
			},
			createOrder() {
				if (Number(this.form.price) < Number(this.info.min_beg_price)) {
					return uni.showToast({
						icon: 'none',
						title: `当前求购价不得低于${this.info.min_beg_price}`
					})
				}

				if (this.disable) return;
				uni.showLoading({
					title: '创建中'
				})
				this.form.pay_way = this.payList.find(v => v.check).pay_way
				this.form.collection_id = this.id;
				createTradOrder(this.form).then(res => {
					let {
						order_id,
						order_sn
					} = res.data;
					new PayUtil({
						order_id,
						order_number: order_sn,
						order_type: 11,
						pay_type: 4,
						pay_way: this.form.pay_way
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		width: 620rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #434976 0, #dc0808 100%);
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 1px;

		.btn-container {
			background-color: white;
			border-radius: 16rpx;
			width: 100%;
			height: 100%;
		}
	}

	.number-box {
		/deep/ input {
			background: none !important;
			color: #222 !important;
		}
	}

	.tips {
		background: linear-gradient(225deg, #F52500 0%, #F56700 100%);
		border-radius: 4px 4px 4px 4px;
	}

	.inp {
		@extend .pt-16, .flex, .flex-ai-center;
	}

	.action {
		position: fixed;
		box-sizing: border-box;
		width: 750rpx;
		left: 0;
		bottom: 0;
	}
</style>